哈囉！今天是第7日（歐買尬終於一個禮拜了），那今天想先來個重要的基礎了解～

為蝦米要了解優先權？

當你遇到一個物件重複設定CSS屬性，這時候你就會想，那到底要如何才能變成我所設定的樣式？或是，欸！為什麼我明明設定了樣式，為什麼都沒跑出來啊！？這時候就攸關CSS選擇器優先權的問題了！

CSS優先權又能分成：

1.選取器之間的優先權

2.CSS屬性之間的優先權

重點：先看權重，在看先後

• 行內＞內部＞外
• html標籤選擇器1分
• 類別選擇器10分
• id選擇器100分
• style 1000分
• important 10000分

優先權的順序：animation(執行期間)＞!important＞inline style＞ID＞class與屬性選擇器＞Tag＞＊號萬用選取器＞繼承的屬性

直接上個範例：

<div id="logo" class="header">
  HELLO
</div>

div {
  background-color: purple;
}
.header {
  background-color: blue;
}
#logo {
  background-color: pink;
}

可以猜猜看，HELLO的背景到底會是什麼顏色呢？

鐺鐺鐺～

是粉．紅・色！ 因為div是1分，.header是10分，#logo是100分，可以得知最重的是#id選擇器，所以是粉紅色喔～

當然你也可以複製這個程式碼，開始玩覆蓋遊戲：）可以更了解權重關係。

！important ：ＮＯ.1

是ＮＯ.1，可以不在乎任何人。 巴特！就是因為這樣，在新手時期就會變成濫用，以致後續修改很麻煩，所以非不得已情況下，「盡量不要使用」！「盡量不要使用」！「盡量不要使用」！（很重要所以說三次，絕對不是要湊字數啦

<div class="content">貓貓狗狗</div>

div{
  color: blue !important;
  font-size: 40px !important;
}
.content{
  color: red;
  font-size: 24px;
}

出來的結果會是：

因為他是！important，所以可以不用管任何人，他說你是藍色就是藍色。（霸道

接下來三個是看書才知道的訊息

「＊號」萬用選取器

在ＣＳＳ優先權中倒數第二低的，只高於「繼承而來的屬性」(字面上的意思：若本身沒有設置樣式的話就繼承父層）。

<div>
  <p>貓貓狗狗</p>
</div>

// <p>標籤繼承父層<div>的藍色
div{
  color: blue;
}
// ＊萬用選取器＞繼承父層
*{
  color: pink;
}

因為<p>沒有給予屬性，所以繼承父層<div>的藍色，又因＊萬用選取優先權＞繼承父層的，最終的顏色是粉紅色。

屬性選擇器的優先權

.header>[class="header"]>[class]

動畫關鍵影格影響的優先權

動畫執行期間有絕對優先權，但脫離動畫執行期間，會恢復到下一階的優先權。

（還沒深入研究動畫，所以先做筆記，日後回顧的話方便）

結論：優先權算是基礎中重要的一門，知道權重後才可以好好的運用～

當你發現樣式沒出現效果的時候，可以開啟chrome除錯，看一下哪個地方的樣式被畫掉，再來依照權重做覆蓋遊戲。

這次部分內容是參考書名：金魚都能懂的CSS選取器。